<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.4.1 模板的工作原理</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 编译器的作用其实就是将模板编译为渲染函数
         * - 对于编译器来说，模板就是一个普通的字符串，
         *    它会分析该字符串并生成一个功能与之相同的渲染函数
         * - 一个 .vue 文件就是一个组件
         *    <template> 标签里的内容就是模板内容， 
         *    编译器会把模板内容编译成渲染函数并添加到 <script> 标签块的组件对象上
         * 
         * 模板的工作原理，也是 Vue.js 渲染页面的流程
         * - 无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的
         * - 渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM
         *
        */

        `<template>
            <div @click="handler">
                click me
            </div>
        </template>`
        // 解析为obj => 
        export default {
            render() {
                return h('div', { onClick: handler }, 'click me')
            }
        }

    </script>
</html>